<template>
  <el-form :model="ruleForm" ref="ruleForm" label-position="top" >
    <!--理赔款支付（其他费用）-->
    <el-card class="box-card" shadow="never">

      <div slot="header" class="header-card">
        <div style="display: flex;justify-content: space-between;width: 100%">
          <span class="header-card-title">理赔款支付（其他费用）</span>
        </div>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="合计总费用:" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.compensationPaymentTotalAmount" disabled placeholder="合计总费用"/>
            <span v-else>{{  ruleForm.compensationPaymentTotalAmount}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
        <el-table size="mini" :data="ruleForm.compensationPaymentDto" border style="width: 100%">

          <el-table-column align="center" label="操作" width="100" v-if="ruleForm.compensationPaymentDto.length > 1 && isEdit"
                           fixed="right">
            <template #default="{row,$index}" v-if="isEdit">
              <el-button size="mini" type="danger" @click="handleDeleTable(row, $index)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收款方" min-width="140" prop="payee">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <el-input v-model="row.payee" v-if="isEdit" size="mini"/>
                <span v-else>{{ row.payee }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收款费用" min-width="140" prop="payAmount">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <el-input v-model="row.payAmount" v-if="isEdit"  v-thousand
                          @change="changeThreeLoss(row, $index, 'payAmount')"
                          size="mini"></el-input>
                <span v-else> {{ format_thousand(row.payAmount) }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center" label="收账号" min-width="140" prop="collectionAccount">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <el-input v-model="row.collectionAccount" v-if="isEdit"/>
                <span v-else>{{ row.collectionAccount }}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <template v-slot:append v-if="isEdit">
            <div class="flex-xy-center" style="height: 30px">
              <e-button type="text" @click="handlAddTable">
                新增
              </e-button>
            </div>
          </template>
        </el-table>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
export default {
  name: 'paymentOfClaims',//理赔款支付
  model: {
    prop: 'detailForm',
    event: 'update:detailForm',
  },

  props: {
    detailForm: {
      type: Object,
      default: {},
    },
    isEdit: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      isShow: true,
    };
  },
  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.detailForm, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('update:detailForm', {...target, [key]: value})
            return true
          }
        })
        return proxy
      }
    }
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    valid() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      })
    },
    handlAddTable() {
      let obj = {
        payee: "",//收款方
        payAmount: "",//   收款费用
        collectionAccount: "",
      }
      this.ruleForm.compensationPaymentDto.push(obj)
    },
    handleDeleTable(row, index) {
      this.ruleForm.compensationPaymentDto.splice(index, 1)
    },
    changeThreeLoss(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/
      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value
        } else {
          row[field] = ""
        }
      } else {
        row[field] = ""
      }
      this.handleCount()
    },
    handleCount() {
      let arr = this.ruleForm.compensationPaymentDto
      let num = 0
      for (let i = 0; i < arr.length; i++) {
        num += Number(arr[i].payAmount)
      }
      this.ruleForm.compensationPaymentTotalAmount = num.toString().match(/^\d+(?:\.\d{0,2})?/)[0]
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

.decoration-illustrate {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}


::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}

</style>


